<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>岚小字识字系统 - 部首笔画管理</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .app-container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            color: white;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: rgba(255,255,255,0.95);
            padding: 20px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-number {
            font-size: 2rem;
            font-weight: bold;
            color: #f5576c;
            margin-bottom: 8px;
        }

        .stat-label {
            color: #666;
            font-size: 14px;
        }

        .main-table {
            background: rgba(255,255,255,0.95);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
        }

        .table-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            flex-wrap: wrap;
            gap: 15px;
        }

        .search-bar {
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }

        .search-input {
            padding: 10px 15px;
            border: 2px solid #e1e5e9;
            border-radius: 25px;
            outline: none;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .search-input:focus {
            border-color: #f5576c;
        }

        .action-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s;
            margin-left: 8px;
        }

        .btn-primary { background: #f5576c; color: white; }
        .btn-success { background: #48bb78; color: white; }
        .btn-secondary { background: #e2e8f0; color: #4a5568; }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .bushou-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }

        .bushou-table th {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            padding: 18px 12px;
            text-align: center;
            font-weight: 600;
            font-size: 14px;
        }

        .bushou-table td {
            padding: 15px 12px;
            text-align: center;
            border-bottom: 1px solid #f0f0f0;
            vertical-align: middle;
        }

        .bushou-table tr:hover {
            background: #fef7f7;
        }

        .bushou-char {
            font-size: 2rem;
            font-weight: bold;
            color: #f5576c;
            text-shadow: 0 2px 8px rgba(245, 87, 108, 0.3);
        }

        .bushou-number {
            font-weight: bold;
            color: #f5576c;
            font-size: 16px;
        }

        .pinyin-text {
            font-size: 16px;
            color: #4a5568;
            font-weight: 500;
        }

        .compound-chars {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            justify-content: center;
            max-width: 200px;
            margin: 0 auto;
        }

        .compound-char {
            background: #fef7f7;
            color: #f5576c;
            padding: 4px 8px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            border: 1px solid #fbb6ce;
        }

        .edit-btn {
            padding: 8px 16px;
            border: 1px solid #f5576c;
            background: white;
            color: #f5576c;
            border-radius: 20px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .edit-btn:hover {
            background: #f5576c;
            color: white;
            transform: scale(1.05);
        }

        /* 弹窗样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal-overlay.show {
            display: flex;
        }

        .editor-modal {
            background: white;
            border-radius: 20px;
            width: 90%;
            max-width: 1000px;
            max-height: 90vh;
            overflow: hidden;
            box-shadow: 0 25px 100px rgba(0,0,0,0.3);
            animation: modalSlideIn 0.3s ease;
        }

        @keyframes modalSlideIn {
            from { opacity: 0; transform: scale(0.9) translateY(20px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }

        .modal-header {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-size: 20px;
            font-weight: 600;
        }

        .close-btn {
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 18px;
            transition: background 0.3s;
        }

        .close-btn:hover {
            background: rgba(255,255,255,0.3);
        }

        .modal-content {
            padding: 30px;
            height: 600px;
            overflow-y: auto;
        }

        .bushou-preview {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 20px;
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            border-radius: 12px;
            margin-bottom: 20px;
        }

        .bushou-preview .char {
            font-size: 4rem;
            font-weight: bold;
            text-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }

        .bushou-preview .info {
            text-align: center;
        }

        .editor-sections {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #2d3748;
            font-size: 13px;
        }

        .form-input, .form-textarea {
            width: 100%;
            padding: 10px 12px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            outline: none;
            font-size: 14px;
            transition: border-color 0.3s;
            font-family: inherit;
        }

        .form-textarea {
            height: 100px;
            resize: vertical;
        }

        .form-input:focus, .form-textarea:focus {
            border-color: #f5576c;
        }

        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 2px solid #e2e8f0;
        }

        .image-section {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .image-upload {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 20px;
            border: 2px dashed #e2e8f0;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .image-upload:hover {
            border-color: #f5576c;
            background: #fef7f7;
        }

        .image-preview {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 8px;
            border: 2px solid #e2e8f0;
        }

        .compound-chars-editor {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 15px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            min-height: 100px;
        }

        .compound-input {
            width: 40px;
            height: 40px;
            text-align: center;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            font-weight: bold;
        }

        .add-char-btn {
            width: 40px;
            height: 40px;
            border: 2px dashed #f5576c;
            background: none;
            color: #f5576c;
            border-radius: 6px;
            cursor: pointer;
            font-size: 20px;
        }

        .save-btn {
            width: 100%;
            padding: 12px;
            background: #48bb78;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s;
        }

        .save-btn:hover {
            background: #38a169;
        }

        @media (max-width: 768px) {
            .editor-sections {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 头部 -->
        <div class="header">
            <h1>🏗️ 部首笔画管理</h1>
            <p>岚小字识字系统 - 复合字组成规律</p>
        </div>

        <!-- 统计卡片 -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-number" id="total-count">8</div>
                <div class="stat-label">总部首数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" id="chars-count">56</div>
                <div class="stat-label">复合字数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" id="avg-chars">7</div>
                <div class="stat-label">平均组字数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" id="completed-count">5</div>
                <div class="stat-label">已完善</div>
            </div>
        </div>

        <!-- 主表格 -->
        <div class="main-table">
            <div class="table-header">
                <h2>📋 部首笔画数据表</h2>
                <div class="search-bar">
                    <input 
                        type="text" 
                        placeholder="搜索部首、读音..." 
                        class="search-input"
                        id="search-input">
                    <button class="action-btn btn-success" onclick="addNewBushou()">
                        ➕ 新增部首
                    </button>
                    <button class="action-btn btn-primary" onclick="importData()">
                        📥 导入数据
                    </button>
                    <button class="action-btn btn-secondary" onclick="exportData()">
                        📤 导出数据
                    </button>
                </div>
            </div>

            <table class="bushou-table">
                <thead>
                    <tr>
                        <th style="width: 60px;">编号</th>
                        <th style="width: 100px;">名称</th>
                        <th style="width: 80px;">部首</th>
                        <th style="width: 80px;">读音</th>
                        <th style="width: 60px;">笔画</th>
                        <th style="width: 200px;">复合字(5-10个)</th>
                        <th style="width: 100px;">操作</th>
                    </tr>
                </thead>
                <tbody id="bushou-tbody">
                    <!-- 数据将通过JavaScript动态填充 -->
                </tbody>
            </table>
        </div>

        <!-- 编辑器弹窗 -->
        <div class="modal-overlay" id="editor-modal">
            <div class="editor-modal">
                <div class="modal-header">
                    <div class="modal-title" id="modal-title">编辑部首</div>
                    <button class="close-btn" onclick="closeEditor()">×</button>
                </div>

                <div class="modal-content">
                    <!-- 部首预览 -->
                    <div class="bushou-preview">
                        <div class="char" id="preview-char">？</div>
                        <div class="info">
                            <div>编号：<span id="preview-number">自动生成</span></div>
                            <div>读音：<span id="preview-pinyin">待填充</span></div>
                            <div>笔画：<span id="preview-strokes">-</span>画</div>
                        </div>
                    </div>

                    <!-- 编辑表单 -->
                    <div class="editor-sections">
                        <!-- 左侧字段 -->
                        <div class="left-section">
                            <h3 class="section-title">📝 基础信息</h3>
                            
                            <div class="form-group">
                                <label class="form-label">编号</label>
                                <input type="text" class="form-input" id="edit-number" placeholder="如：001（自动生成）">
                            </div>

                            <div class="form-group">
                                <label class="form-label">名称 *</label>
                                <input type="text" class="form-input" id="edit-name" placeholder="如：土字旁" oninput="updatePreview()">
                            </div>

                            <div class="form-group">
                                <label class="form-label">部首 *</label>
                                <input type="text" class="form-input" id="edit-bushou" placeholder="如：土" maxlength="1" oninput="updatePreview()">
                            </div>

                            <div class="form-group">
                                <label class="form-label">读音</label>
                                <input type="text" class="form-input" id="edit-pinyin" placeholder="如：tǔ" oninput="updatePreview()">
                            </div>

                            <div class="form-group">
                                <label class="form-label">笔画数</label>
                                <input type="number" class="form-input" id="edit-strokes" placeholder="如：3" oninput="updatePreview()">
                            </div>

                            <div class="form-group">
                                <label class="form-label">含义</label>
                                <textarea class="form-textarea" id="edit-meaning" placeholder="部首的基本含义和作用..."></textarea>
                            </div>

                            <div class="form-group">
                                <label class="form-label">复合字（5-10个）</label>
                                <div class="compound-chars-editor" id="compound-chars">
                                    <!-- 动态生成复合字输入框 -->
                                </div>
                                <small style="color: #666;">点击+号添加汉字，每个部首可组成5-10个复合字</small>
                            </div>
                        </div>

                        <!-- 右侧字段 -->
                        <div class="right-section">
                            <h3 class="section-title">🖼️ 象形起源</h3>

                            <div class="form-group">
                                <label class="form-label">象形图片</label>
                                <div class="image-section">
                                    <div class="image-upload" onclick="triggerImageUpload()">
                                        <input type="file" id="imageInput" accept="image/*" style="display: none;" onchange="handleImageUpload(event)">
                                        <div id="image-preview-container">
                                            <p>📷 点击上传象形图片</p>
                                            <small>支持 JPG、PNG 格式</small>
                                        </div>
                                    </div>
                                    <button class="action-btn btn-primary" onclick="searchOriginData()" style="margin-top: 10px;">
                                        🔍 搜索象形数据库
                                    </button>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="form-label">起源说明</label>
                                <textarea class="form-textarea" id="edit-origin" placeholder="部首的象形起源和演变历程..."></textarea>
                            </div>

                            <div class="form-group">
                                <label class="form-label">组字规律</label>
                                <textarea class="form-textarea" id="edit-rules" placeholder="此部首与字根组成汉字的规律和特点..."></textarea>
                            </div>

                            <div class="form-group">
                                <label class="form-label">教学要点</label>
                                <textarea class="form-textarea" id="edit-teaching" placeholder="教学时需要重点强调的内容..."></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- 保存按钮 -->
                    <button class="save-btn" onclick="saveBushou()">
                        💾 <span id="save-text">保存修改</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let bushouData = [
            { id: 1, number: '001', name: '土字旁', bushou: '土', pinyin: 'tǔ', strokes: 3, meaning: '与土地、土壤相关', origin: '象形字，像地面上的土堆', compoundChars: ['地', '土', '坐', '场', '城', '堂', '塔'], imageUrl: '', completed: true },
            { id: 2, number: '002', name: '水字旁', bushou: '水', pinyin: 'shuǐ', strokes: 4, meaning: '与水、液体相关', origin: '象形字，像流动的水波', compoundChars: ['河', '海', '湖', '池', '洗', '清', '流'], imageUrl: '', completed: true },
            { id: 3, number: '003', name: '火字旁', bushou: '火', pinyin: 'huǒ', strokes: 4, meaning: '与火焰、热度相关', origin: '象形字，像燃烧的火焰', compoundChars: ['烧', '热', '灯', '炎', '烟', '炒'], imageUrl: '', completed: false },
            { id: 4, number: '004', name: '木字旁', bushou: '木', pinyin: 'mù', strokes: 4, meaning: '与树木、植物相关', origin: '象形字，像一棵树的形状', compoundChars: ['树', '林', '森', '板', '桌', '椅', '桥'], imageUrl: '', completed: true },
            { id: 5, number: '005', name: '金字旁', bushou: '金', pinyin: 'jīn', strokes: 8, meaning: '与金属、贵重相关', origin: '会意字，表示金属的珍贵', compoundChars: ['银', '铜', '铁', '钱', '钟'], imageUrl: '', completed: false },
            { id: 6, number: '006', name: '口字旁', bushou: '口', pinyin: 'kǒu', strokes: 3, meaning: '与嘴巴、说话相关', origin: '象形字，像张开的嘴巴', compoundChars: ['吃', '说', '唱', '叫', '听', '味', '呼'], imageUrl: '', completed: true },
            { id: 7, number: '007', name: '心字旁', bushou: '心', pinyin: 'xīn', strokes: 4, meaning: '与心情、感情相关', origin: '象形字，像心脏的形状', compoundChars: ['想', '思', '忘', '怕', '爱', '快', '慢'], imageUrl: '', completed: false },
            { id: 8, number: '008', name: '手字旁', bushou: '手', pinyin: 'shǒu', strokes: 4, meaning: '与手部动作相关', origin: '象形字，像伸出的手掌', compoundChars: ['打', '拿', '拉', '推', '抱', '持'], imageUrl: '', completed: true }
        ];

        let currentPage = 1;
        let pageSize = 10;
        let searchKeyword = '';
        let isNewBushou = false;
        let currentBushou = null;

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            updateStatistics();
            renderTable();
            
            // 搜索功能
            document.getElementById('search-input').addEventListener('input', function() {
                searchKeyword = this.value.toLowerCase();
                currentPage = 1;
                renderTable();
            });
        });

        // 更新统计信息
        function updateStatistics() {
            const total = bushouData.length;
            const completed = bushouData.filter(b => b.completed).length;
            const totalChars = bushouData.reduce((sum, b) => sum + b.compoundChars.length, 0);
            const avgChars = Math.round(totalChars / total);

            document.getElementById('total-count').textContent = total;
            document.getElementById('completed-count').textContent = completed;
            document.getElementById('chars-count').textContent = totalChars;
            document.getElementById('avg-chars').textContent = avgChars;
        }

        // 渲染表格
        function renderTable() {
            const tbody = document.getElementById('bushou-tbody');
            const filteredData = bushouData.filter(bushou => 
                bushou.name.includes(searchKeyword) ||
                bushou.bushou.includes(searchKeyword) ||
                bushou.pinyin.toLowerCase().includes(searchKeyword) ||
                bushou.number.includes(searchKeyword)
            );

            const start = (currentPage - 1) * pageSize;
            const end = start + pageSize;
            const pageData = filteredData.slice(start, end);

            tbody.innerHTML = pageData.map(bushou => `
                <tr>
                    <td><div class="bushou-number">${bushou.number}</div></td>
                    <td><div class="pinyin-text">${bushou.name}</div></td>
                    <td><div class="bushou-char">${bushou.bushou}</div></td>
                    <td><div class="pinyin-text">${bushou.pinyin}</div></td>
                    <td><div class="pinyin-text">${bushou.strokes}画</div></td>
                    <td>
                        <div class="compound-chars">
                            ${bushou.compoundChars.map(char => `<span class="compound-char">${char}</span>`).join('')}
                        </div>
                    </td>
                    <td><button class="edit-btn" onclick="editBushou(${bushou.id})">📝 编辑</button></td>
                </tr>
            `).join('');
        }

        // 编辑部首
        function editBushou(id) {
            currentBushou = bushouData.find(b => b.id === id);
            isNewBushou = false;
            
            // 填充表单
            document.getElementById('edit-number').value = currentBushou.number || '';
            document.getElementById('edit-name').value = currentBushou.name || '';
            document.getElementById('edit-bushou').value = currentBushou.bushou || '';
            document.getElementById('edit-pinyin').value = currentBushou.pinyin || '';
            document.getElementById('edit-strokes').value = currentBushou.strokes || '';
            document.getElementById('edit-meaning').value = currentBushou.meaning || '';
            document.getElementById('edit-origin').value = currentBushou.origin || '';
            document.getElementById('edit-rules').value = currentBushou.rules || '';
            document.getElementById('edit-teaching').value = currentBushou.teaching || '';

            // 更新标题和预览
            document.getElementById('modal-title').textContent = `编辑部首 - ${currentBushou.name}`;
            document.getElementById('save-text').textContent = '保存修改';
            updatePreview();
            updateCompoundChars(currentBushou.compoundChars);
            
            // 显示弹窗
            document.getElementById('editor-modal').classList.add('show');
        }

        // 新增部首
        function addNewBushou() {
            currentBushou = null;
            isNewBushou = true;
            
            // 清空表单
            document.getElementById('edit-number').value = getNextNumber();
            document.getElementById('edit-name').value = '';
            document.getElementById('edit-bushou').value = '';
            document.getElementById('edit-pinyin').value = '';
            document.getElementById('edit-strokes').value = '';
            document.getElementById('edit-meaning').value = '';
            document.getElementById('edit-origin').value = '';
            document.getElementById('edit-rules').value = '';
            document.getElementById('edit-teaching').value = '';

            // 更新标题
            document.getElementById('modal-title').textContent = '新增部首';
            document.getElementById('save-text').textContent = '添加部首';
            updatePreview();
            updateCompoundChars([]);
            
            // 显示弹窗
            document.getElementById('editor-modal').classList.add('show');
        }

        // 获取下一个编号
        function getNextNumber() {
            const maxNum = Math.max(...bushouData.map(b => parseInt(b.number)));
            return String(maxNum + 1).padStart(3, '0');
        }

        // 更新预览
        function updatePreview() {
            const bushou = document.getElementById('edit-bushou').value || '？';
            const name = document.getElementById('edit-name').value || '待填充';
            const number = document.getElementById('edit-number').value || '自动生成';
            const pinyin = document.getElementById('edit-pinyin').value || '待填充';
            const strokes = document.getElementById('edit-strokes').value || '-';

            document.getElementById('preview-char').textContent = bushou;
            document.getElementById('preview-number').textContent = number;
            document.getElementById('preview-pinyin').textContent = pinyin;
            document.getElementById('preview-strokes').textContent = strokes;
        }

        // 更新复合字编辑器
        function updateCompoundChars(chars = []) {
            const container = document.getElementById('compound-chars');
            container.innerHTML = '';
            
            // 添加现有字符
            chars.forEach((char, index) => {
                const input = document.createElement('input');
                input.type = 'text';
                input.className = 'compound-input';
                input.value = char;
                input.maxLength = 1;
                input.addEventListener('input', function() {
                    if (this.value.length > 1) {
                        this.value = this.value.slice(0, 1);
                    }
                });
                container.appendChild(input);
            });
            
            // 添加新增按钮（最多10个字符）
            if (chars.length < 10) {
                const addBtn = document.createElement('button');
                addBtn.className = 'add-char-btn';
                addBtn.textContent = '+';
                addBtn.type = 'button';
                addBtn.onclick = () => {
                    if (container.children.length < 11) { // 10个输入框 + 1个按钮
                        const input = document.createElement('input');
                        input.type = 'text';
                        input.className = 'compound-input';
                        input.maxLength = 1;
                        input.addEventListener('input', function() {
                            if (this.value.length > 1) {
                                this.value = this.value.slice(0, 1);
                            }
                        });
                        container.insertBefore(input, addBtn);
                        input.focus();
                    }
                };
                container.appendChild(addBtn);
            }
        }

        // 获取复合字数组
        function getCompoundChars() {
            const inputs = document.querySelectorAll('.compound-input');
            return Array.from(inputs).map(input => input.value).filter(val => val.trim());
        }

        // 关闭编辑器
        function closeEditor() {
            document.getElementById('editor-modal').classList.remove('show');
        }

        // 保存部首
        function saveBushou() {
            const name = document.getElementById('edit-name').value;
            const bushou = document.getElementById('edit-bushou').value;
            if (!name || !bushou) {
                alert('请填写必填字段：名称和部首');
                return;
            }

            const compoundChars = getCompoundChars();
            if (compoundChars.length < 5) {
                alert('请至少添加5个复合字');
                return;
            }

            const bushouData_ = {
                number: document.getElementById('edit-number').value || getNextNumber(),
                name: name,
                bushou: bushou,
                pinyin: document.getElementById('edit-pinyin').value,
                strokes: parseInt(document.getElementById('edit-strokes').value) || 0,
                meaning: document.getElementById('edit-meaning').value,
                origin: document.getElementById('edit-origin').value,
                rules: document.getElementById('edit-rules').value,
                teaching: document.getElementById('edit-teaching').value,
                compoundChars: compoundChars,
                completed: true
            };

            if (isNewBushou) {
                bushouData_.id = Date.now();
                bushouData.push(bushouData_);
                alert('部首添加成功！');
            } else {
                const index = bushouData.findIndex(b => b.id === currentBushou.id);
                if (index !== -1) {
                    bushouData[index] = { ...bushouData[index], ...bushouData_ };
                    alert('部首修改成功！');
                }
            }

            updateStatistics();
            renderTable();
            closeEditor();
        }

        // 搜索象形数据库
        function searchOriginData() {
            const name = document.getElementById('edit-name').value;
            if (!name) {
                alert('请先输入部首名称');
                return;
            }
            alert(`🔍 正在搜索"${name}"的象形数据...\n\n功能说明：\n• 连接象形字数据库\n• 自动匹配相关图片\n• 获取起源说明\n• 如无数据则手动上传`);
        }

        // 处理图片上传
        function handleImageUpload(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const container = document.getElementById('image-preview-container');
                    container.innerHTML = `
                        <img src="${e.target.result}" alt="象形图片" class="image-preview">
                        <p>点击更换图片</p>
                    `;
                };
                reader.readAsDataURL(file);
            }
        }

        // 触发图片上传
        function triggerImageUpload() {
            document.getElementById('imageInput').click();
        }

        // 导入数据
        function importData() {
            alert('📥 部首笔画导入功能\n\n支持导入格式：\n• Excel/CSV格式\n• JSON数据格式\n\n数据字段：\n• 部首名称、读音、笔画\n• 复合字列表（5-10个）\n• 象形起源、含义说明\n\n🎯 与字根的关联关系将自动建立');
        }

        // 导出数据
        function exportData() {
            const dataStr = JSON.stringify(bushouData, null, 2);
            const dataBlob = new Blob([dataStr], { type: 'application/json' });
            const url = URL.createObjectURL(dataBlob);
            const link = document.createElement('a');
            link.href = url;
            link.download = `部首笔画数据_${new Date().toISOString().split('T')[0]}.json`;
            link.click();
            URL.revokeObjectURL(url);
            alert('数据导出成功！');
        }

        // 点击弹窗外部关闭
        document.getElementById('editor-modal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeEditor();
            }
        });
    </script>
</body>
</html> 